import React ,{useState} from 'react'
import { Badge, TabBar } from 'antd-mobile';
import { AppOutline, MessageOutline, MessageFill, UnorderedListOutline, UserOutline, } from 'antd-mobile-icons';
import { Outlet,useNavigate } from 'react-router-dom';
export default function Three() {
  const navigator = useNavigate();
  const [selected, setSelected] = useState('我的工作室');
  const [color, setcolor] = useState(false);
  const navigate = useNavigate();

  const handleButtonClick = (option) => {
    setSelected(option);
  };
  const tabs = [
    {
        key: '/txl/three/xiao',
        title: '消息',
        icon: <AppOutline />,
        badge: Badge.dot,
    },
    {
        key: '/txl/three/suo',
        title: '所有',
        icon: <UnorderedListOutline />,
        badge: '5',
    },
    {
        key: '/txl/three/fen',
        title: '分组',
        icon: (active) => active ? <MessageFill /> : <MessageOutline />,
        badge: '99+',
    },
    {
        key: '/txl/three/qun',
        title: '群聊',
        icon: <UserOutline />,
    },
];
  return (
    <div>
        <TabBar>
          {tabs.map(item => (<TabBar.Item key={item.key} onClick={()=>navigator(item.key)} title={item.title}/>))}
        </TabBar>
        <Outlet/>
    </div>
  )
}
